<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>高级表单元素</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
		<link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
		<link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="../../plugin/select2/css/select2.min.css">
		<link rel="stylesheet" href="../../plugin/selectpage/selectpage.css">
		<link rel="stylesheet" href="../../plugin/iCheck/all.css">
		<link rel="stylesheet" href="../../plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="../../plugin/bootstrap-daterangepicker/daterangepicker.css">
		<link rel="stylesheet" href="../../plugin/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
		<link rel="stylesheet" href="../../plugin/bootstrap-timepicker/bootstrap-timepicker.min.css">
		<link rel="stylesheet" href="../../system/css/common.css">
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body class="hold-transition gray-bg sidebar-mini">
		<div class="wrapper">
			<section class="content">
				<!-- Select2 下拉选择器 -->
				<div class="box box-success">
					<div class="box-header with-border">
						<h3 class="box-title">Select2 下拉选择器</h3>
						<div class="box-tools pull-right">
						</div>
					</div>
					<div class="box-body">
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label>标准模式</label>
									<select class="form-control select2" style="width: 100%;">
										<option selected="selected">北京市</option>
										<option>深圳市</option>
										<option>广州市</option>
										<option>上海市</option>
										<option>重庆市</option>
										<option>杭州市</option>
									</select>
								</div>
								<div class="form-group">
									<label>禁用模式</label>
									<select class="form-control select2" disabled="disabled" style="width: 100%;">
										<option selected="selected">北京市</option>
										<option>深圳市</option>
										<option>广州市</option>
										<option>上海市</option>
										<option>重庆市</option>
										<option>杭州市</option>
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>多选模式</label>
									<select class="form-control select2" multiple="multiple" data-placeholder="选择一个城市" style="width: 100%;">
										<option>北京市</option>
										<option>深圳市</option>
										<option>广州市</option>
										<option>上海市</option>
										<option>重庆市</option>
										<option>杭州市</option>
									</select>
								</div>
								<div class="form-group">
									<label>禁止选项</label>
									<select class="form-control select2" style="width: 100%;">
										<option selected="selected">北京市</option>
										<option>深圳市</option>
										<option disabled="disabled">广州市 (禁用)</option>
										<option>上海市</option>
										<option>重庆市</option>
										<option>杭州市</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="box-footer">
						访问 <a href="https://select2.github.io/" target="_blank">Select2 插件</a> 获取更多信息和样例.
					</div>
				</div>
				<!-- SelectPage 下拉选择器 -->
				<div class="box box-success">
					<div class="box-header with-border">
						<h3 class="box-title">SelectPage 下拉选择器</h3>
						<div class="box-tools pull-right">
						</div>
					</div>
					<div class="box-body">
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label>标准模式</label>
									<input type="text" id="selectPage" placeholder="请输入查询关键字" style="width: 300px;">
								</div>
								<div class="form-group">
									<button type="button" class="btn btn-default" id="func1"><i class="fa fa-file-text-o"></i> 获得选中项目的文本内容</button>
									<button type="button" class="btn btn-default" id="func2"><i class="fa fa-trash-o"></i> 清除选中项目</button>
									<button type="button" class="btn btn-default" id="func3"><i class="fa fa fa-check-square-o "></i> 动态修改选中项目</button>
									<button type="button" class="btn btn-default" id="func4"><i class="fa fa-ban"></i> 禁用/启用插件</button>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>多选模式</label>
									<input type="text" id="selectPageMore" value="7,2,3" placeholder="请输入查询关键字" style="width: 300px;" >
								</div>
								<div class="form-group">
									<button type="button" class="btn btn-default" id="func5"><i class="fa fa-trash-o"></i> 清除选中项目</button>
								</div>
							</div>
						</div>
					</div>
					<div class="box-footer">
						访问 <a href="https://github.com/TerryZ/SelectPage" target="_blank">SelectPage 插件</a> 获取更多信息和样例.
					</div>
				</div>
				<div class="row">
					<!-- Inputmask插件 -->
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header">
								<h3 class="box-title">Inputmask插件</h3>
							</div>
							<div class="box-body">
								<div class="form-group">
									<label>日期格式:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-calendar"></i>
										</div>
										<input type="text" class="form-control" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask>
									</div>
								</div>
						
								<div class="form-group">
									<label>电话格式:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-phone"></i>
										</div>
										<input type="text" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>
									</div>
								</div>
						
								<div class="form-group">
									<label>IP地址格式:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-laptop"></i>
										</div>
										<input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask>
									</div>
								</div>
							</div>
							<div class="box-footer">
								访问 <a href="https://github.com/RobinHerbots/Inputmask" target="_blank">Inputmask插件</a> 获取更多信息和样例.
							</div>
						</div>
					</div>
					<!-- iCheck控件 -->
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header">
								<h3 class="box-title">iCheck控件</h3>
							</div>
							<div class="box-body">
								<div class="form-group">
									<label>
										<input type="checkbox" class="minimal" checked>
									</label>
									<label>
										<input type="checkbox" class="minimal">
									</label>
									<label>
										<input type="checkbox" class="minimal" disabled>
										标准皮肤复选框
									</label>
								</div>
								<div class="form-group">
									<label>
										<input type="radio" name="r1" class="minimal" checked>
									</label>
									<label>
										<input type="radio" name="r1" class="minimal">
									</label>
									<label>
										<input type="radio" name="r1" class="minimal" disabled>
										标准皮肤单选框
									</label>
								</div>
								<div class="form-group">
									<label>
										<input type="checkbox" class="minimal-red" checked>
									</label>
									<label>
										<input type="checkbox" class="minimal-red">
									</label>
									<label>
										<input type="checkbox" class="minimal-red" disabled>
										标准红色皮肤复选框
									</label>
								</div>
								<div class="form-group">
									<label>
										<input type="radio" name="r2" class="minimal-red" checked>
									</label>
									<label>
										<input type="radio" name="r2" class="minimal-red">
									</label>
									<label>
										<input type="radio" name="r2" class="minimal-red" disabled>
										标准红色皮肤单选框
									</label>
								</div>
								<div class="form-group">
									<label>
										<input type="checkbox" class="flat-red" checked>
									</label>
									<label>
										<input type="checkbox" class="flat-red">
									</label>
									<label>
										<input type="checkbox" class="flat-red" disabled>
										扁平绿色皮肤复选框
									</label>
								</div>
								<div class="form-group">
									<label>
										<input type="radio" name="r3" class="flat-red" checked>
									</label>
									<label>
										<input type="radio" name="r3" class="flat-red">
									</label>
									<label>
										<input type="radio" name="r3" class="flat-red" disabled>
										扁平绿色皮肤单选框
									</label>
								</div>
							</div>
							<div class="box-footer">
								查看<a href="http://fronteed.com/iCheck/" target="_blank">iCheck插件</a>获取更多信息和样例
							</div>
						</div>
					</div>
				</div>
				
				<div class="row">
					<!-- datepicker日期选择器 -->
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header">
								<h3 class="box-title">datepicker日期选择器</h3>
							</div>
							<div class="box-body">
								<div class="form-group">
									<label>日期选择:</label>
									<div class="input-group date">
									  <input type="text" class="form-control" id="datepicker-input">
									</div>
								</div>
								<div class="form-group">
									<label>日期选择:</label>
									<div class="input-group date">
										<input type="text" class="form-control pull-right" id="datepicker">
										<div class="input-group-addon">
											<i class="fa fa-calendar"></i>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label>日期区间:</label>
									<div class="input-daterange input-group" id="datepicker-range">
									    <input type="text" class="input-sm form-control" name="start" />
									    <span class="input-group-addon">to</span>
									    <input type="text" class="input-sm form-control" name="end" />
									</div>
								</div>
							</div>
							<div class="box-footer">
								访问 <a href="https://github.com/uxsolutions/bootstrap-datepicker" target="_blank">datepicker插件</a> 获取更多信息和样例.
							</div>
						</div>
					</div>
					<!-- daterangepicker日期选择器 -->
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header">
								<h3 class="box-title">daterangepicker日期选择器</h3>
							</div>
							<div class="box-body">
								<div class="form-group">
									<label>日期区间:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-calendar"></i>
										</div>
										<input type="text" class="form-control pull-right" id="reservation">
									</div>
								</div>
						
								<div class="form-group">
									<label>带快捷方式日期时间区间:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-clock-o"></i>
										</div>
										<input type="text" class="form-control pull-right" id="reservationtime">
									</div>
								</div>
							</div>
							<div class="box-footer">
								访问 <a href="https://www.daterangepicker.cn/" target="_blank">daterangepicker插件</a> 获取更多信息和样例.
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<!-- colorpicker颜色选择器 -->
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header">
								<h3 class="box-title">colorpicker颜色选择器</h3>
							</div>
							<div class="box-body">
								<div class="form-group">
									<label>颜色选择器:</label>
									<input type="text" class="form-control my-colorpicker1">
								</div>
								<div class="form-group">
									<label>带插件的颜色选择器:</label>
									<div class="input-group my-colorpicker2">
										<input type="text" class="form-control">
										<div class="input-group-addon">
											<i></i>
										</div>
									</div>
								</div>
							</div>
							<div class="box-footer">
								访问 <a href="https://github.com/itsjavi/bootstrap-colorpicker" target="_blank">bootstrap-colorpicker插件</a> 获取更多信息和样例.
							</div>
						</div>
					</div>
					<!-- timepicker时间选择器 -->
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header">
								<h3 class="box-title">timepicker时间选择器</h3>
							</div>
							<div class="box-body">
								<div class="bootstrap-timepicker">
									<div class="form-group">
										<label>时间选择器:</label>
										<div class="input-group">
											<input type="text" class="form-control timepicker">
											<div class="input-group-addon">
												<i class="fa fa-clock-o"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="box-footer">
								访问 <a href="https://github.com/jdewit/bootstrap-timepicker" target="_blank">timepicker插件</a> 获取更多信息和样例.
							</div>
						</div>
					</div>
				</div>
			</section>
			<div class="control-sidebar-bg"></div>
		</div>

		<script src="../../plugin/jquery/jquery.min.js"></script>
		<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
		<script src="../../adminlte/js/adminlte.min.js"></script>
		<script src="../../plugin/select2/js/select2.min.js"></script>
		<script src="../../plugin/select2/js/i18n/zh-CN.js"></script>
		<script src="../../plugin/selectpage/selectpage.min.js"></script>
		<script src="../../plugin/input-mask/jquery.inputmask.js"></script>
		<script src="../../plugin/input-mask/jquery.inputmask.date.extensions.js"></script>
		<script src="../../plugin/input-mask/jquery.inputmask.extensions.js"></script>
		<script src="../../plugin/iCheck/icheck.min.js"></script>
		<script src="../../plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
		<script src="../../plugin/bootstrap-datepicker/js/bootstrap-datepicker.zh-CN.min.js"></script>
		<script src="../../plugin/bootstrap-daterangepicker/moment.min.js"></script>
		<script src="../../plugin/bootstrap-daterangepicker/daterangepicker.js"></script>
		<script src="../../plugin/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
		<script src="../../plugin/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
		<script src="../../plugin/fastclick/fastclick.js"></script>
		
		<script>
			$(function() {
				// select2
				$('.select2').select2();
				
				// selectpage
				var tag_data = [
				    {id:1 ,name:'Bei Jing',desc:'北京'},
				    {id:2 ,name:'Shang Hai',desc:'上海'},
				    {id:3 ,name:'Guang Zhou',desc:'广州'},
					{id:4 ,name:'Shen Zhen',desc:'深圳'},
				    {id:5 ,name:'Chong Qing',desc:'重庆'},
					{id:6 ,name:'Tian Jin',desc:'天津'},
					{id:7 ,name:'Kun Ming',desc:'昆明'},
				];
				// showField：设置下拉列表中显示文本的列
				// keyField：设置下拉列表项目中项目的KEY值，用于提交表单
				// data：数据源，可以是JSON数据格式，也可以是URL
				$('#selectPage').selectPage({
				    showField : 'desc',
				    keyField : 'id',
				    data : tag_data
				});
				// 获得选中项目的文本内容
				$('#func1').click(function(){
				    alert($('#selectPage').selectPageText());
				});
				// 清除所有选中的项目
				$('#func2').click(function(){
				    $('#selectPage').selectPageClear();
				});
				// 动态修改选中项目
				$('#func3').click(function(){
				    $('#selectPage').val('20');
				    $('#selectPage').selectPageRefresh();
				});
				// 设置插件禁用 / 启用
				$('#funcDisabled').click(function(){
				    if($('#selectPage').selectPageDisabled())//判断当前状态
				        $('#selectPage').selectPageDisabled(false);
				    else
				        $('#selectPage').selectPageDisabled(true);
				});
				// 多选
				$('#selectPageMore').selectPage({
				    showField : 'desc',
				    keyField : 'id',
				    data : tag_data,
				    multiple : true, //启用多选模式
				    maxSelectLimit : 3, //限制最多选中三个项目
				    selectToCloseList : false //设置选中项目后不关闭列表
				});
				// 清除所有选中的项目
				$('#func5').click(function(){
				    $('#selectPageMore').selectPageClear();
				});
				// mask
				$('#datemask').inputmask('yyyy-mm-dd', {
					'placeholder': 'yyyy-mm-dd'
				})
				$('[data-mask]').inputmask()
				$('#datepicker-input').datepicker({
					language: "zh-CN",
					autoclose: true
				})
				// datepicker
				$('#datepicker').datepicker({
					language: "zh-CN",
					autoclose: true
				})
				// datepickerrange
				$('#datepicker-range').datepicker({
					language: "zh-CN",
					autoclose: true
				})
				$('#reservation').daterangepicker({
					"opens": "right",
					locale: {
						format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
						applyLabel: '确定', //确定按钮文本
						cancelLabel: '取消', //取消按钮文本
						customRangeLabel: '自定义',
						daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
						monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
						firstDay: 1
					},
				})
				$('#reservationtime').daterangepicker({
						timePicker: true, //显示时间
						timePicker24Hour: true, //时间制
						timePickerSeconds: true, //时间显示到秒
						startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
						endDate: moment(new Date()), //设置结束器日期
						maxDate: moment(new Date()), //设置最大日期
						"opens": "right",
						ranges: {
							//'今天': [moment(), moment()],
							'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
							'上周': [moment().subtract(6, 'days'), moment()],
							'前30天': [moment().subtract(29, 'days'), moment()],
							'本月': [moment().startOf('month'), moment().endOf('month')],
							'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month')
								.endOf('month')
							]
						},
						showWeekNumbers: true,
						locale: {
							format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
							applyLabel: '确定', //确定按钮文本
							cancelLabel: '取消', //取消按钮文本
							customRangeLabel: '自定义',
							daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
							monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
							firstDay: 1
						},
					},
					function(start, end, label) {
						timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
						console.log(timeRangeChange);
					}
				)
				// iCheck 
				$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
					checkboxClass: 'icheckbox_minimal-blue',
					radioClass: 'iradio_minimal-blue'
				})
				$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
					checkboxClass: 'icheckbox_minimal-red',
					radioClass: 'iradio_minimal-red'
				})
				$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
					checkboxClass: 'icheckbox_flat-green',
					radioClass: 'iradio_flat-green'
				})
				// Colorpicker
				$('.my-colorpicker1').colorpicker()
				$('.my-colorpicker2').colorpicker()
				// Timepicker
				$('.timepicker').timepicker({
					showInputs: false
				})
			})
		</script>
	</body>
</html>
